<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>青少年科学教育研究中心</title>
    <link rel="stylesheet" href="../css/study_report.css" />
    <link rel="stylesheet" href="../css/iconfont.css" />
    <script src="../plugins/jquery-3.6.0.min.js"></script>
    <script type="module" src="../js/localstorage.js"></script>
  </head>

  <body>
    <div id="container">
      <div id="header">
        <div id="back"></div>
        <div id="address">走进科学</div>
        <div id="share" class="iconfont icon-fenxiang"></div>
      </div>
      <div id="main">
        <div id="title">我的学习报告</div>
        <div id="count_card">
          <div class="toptag"></div>
          <div class="count_data">
            <p>
              <span>1</span>
              节
            </p>
            <p>科学动画课</p>
          </div>
          <div
            class="count_data"
            style="border-left: 1px solid #ccc; border-right: 1px solid #ccc"
          >
            <p>
              <span>4</span>
              个
            </p>
            <p>科学知识点</p>
          </div>
          <div class="count_data">
            <p>
              <span>1</span>
              次
            </p>
            <p>互动操作</p>
          </div>
        </div>
        <!-- 照片卡片 -->
        <div id="photo_card">
          <video id="video"></video>
          <canvas id="canvas"></canvas>
          <input
            id="imgInp"
            type="file"
            accept="image/*"
            cpture="camera"
            class="camera_pic"
          />
          <img id="blah" src="" alt="" />
          <div class="camera_text">留下你的美好瞬间</div>
        </div>

        <!-- 项目陈列 -->
        <div id="item_list">
          <div class="list_item" style="width: 50%">
            <div
              class="item_pic"
              style="background: url('../images/认知观察.png')"
            ></div>
            <div class="item_text">认知观察</div>
          </div>
          <div class="list_item" style="width: 50%">
            <div
              class="item_pic"
              style="background: url('../images/比较判断.png')"
            ></div>
            <div class="item_text">比较判断</div>
          </div>
          <div class="list_item">
            <div
              class="item_pic"
              style="background: url('../images/想象创造.png')"
            ></div>
            <div class="item_text">想象创造</div>
          </div>
          <div class="list_item">
            <div
              class="item_pic"
              style="background: url('../images/逻辑思考.png')"
            ></div>
            <div class="item_text">逻辑思考</div>
          </div>
          <div class="list_item">
            <div
              class="item_pic"
              style="background: url('../images/互动实践.png')"
            ></div>
            <div class="item_text">互动实践</div>
          </div>
        </div>
      </div>
      <div id="footer">
        <div id="my_course">
          <!-- <img src="../images/我的课程.png" alt="" /> -->
          <div class="icon"></div>
          <p>我的课程</p>
        </div>
        <div id="study_report">
          <!-- <img src="../images/报告.png" alt="" /> -->
          <div class="icon"></div>
          <p>学习报告</p>
        </div>
      </div>
    </div>
  </body>

  <script type="module">
    import { handleLocalStorage } from '../js/localstorage.js'
    $(function () {
      console.log('onloadstart')
      let width = document.documentElement.clientWidth
      let height = document.documentElement.clientHeight
      let DESIGN_WIDTH = 750
      let DESIGN_HEIGHT = 1334

      document.documentElement.style.fontSize =
        (width * 12) / DESIGN_WIDTH + 'px'

      // 获取和设置header
      let header = $('#header')
      header.css({
        width: width,
        height: (width * 100) / DESIGN_WIDTH,
      })
      header.css({
        'line-height': header.height() + 'px',
      })

      let headerBack = $('#back')
      headerBack.on('click', function (e) {
        location.href = '../index.html'
      })

      $('#share').on('click', function shareEvent(e) {
        console.log(e)
        e.stopPropagation()
        if (handleLocalStorage('get', 'shareImg')) {
          location.href = './share_page.html'
        } else {
          alert('小朋友，你还没有选择要分享的图片，请选择后再来分享！')
        }
      })

      // 获取和设置footer
      let footer = $('#footer')
      footer.css({
        width: width,
        height: (height * 100) / DESIGN_HEIGHT,
      })
      footer.children('#my_course').on('click', function (e) {
        e.stopPropagation()
        location.href = '../index.html'
      })
      footer.children('#study_report').on('click', function (e) {
        e.stopPropagation()
        location.reload()
      })

      // 获取和设置main
      let main = $('#main')
      main.css({
        width: width,
        height: height - header.height() - footer.height(),
      })
      let bg_circle = $('.circle')
      bg_circle.css({
        width: width,
        height: (width * 140) / DESIGN_WIDTH,
        'border-bottom-left-radius': width * 0.5,
        'border-bottom-right-radius': width * 0.5,
      })
      let main_title = $('#title')
      main_title.css({
        width: width,
        height: (width * 110) / DESIGN_WIDTH,
      })
      main_title.css('line-height', main_title.height() + 'px')
      main_title.css('font-size', (width * 32) / DESIGN_WIDTH + 'px')
      main_title.css({
        'font-family': 'PingFangSC',
      })
      // 获取和设置统计卡片区域
      let main_countercard = $('#count_card')
      main_countercard.css({
        width: (width * 690) / DESIGN_WIDTH,
        height: (height * 180) / DESIGN_HEIGHT,
        top: main_title.height(),
      })
      main_countercard.css('left', (width - main_countercard.width()) / 2)

      // 获取和设置照片卡片区域
      let main_photo_card = $('#photo_card')
      main_photo_card.css({
        width: main_countercard.width(),
        height: (height * 310) / DESIGN_HEIGHT,
        top: main_title.height() + main_countercard.height() + 20,
      })
      main_photo_card.css('left', (width - main_photo_card.width()) / 2)
      function readURL(input) {
        if (input.files && input.files[0]) {
          var reader = new FileReader()
          reader.onload = function (e) {
            console.log('readeronload', e)
            $('#blah').attr('src', e.target.result)
            handleLocalStorage('set', 'shareImg', e.target.result)
            $('#blah').show()
            $('.camera_text').hide()
            $('#imgInp').hide()
          }
          reader.readAsDataURL(input.files[0])
        }
      }

      $('#imgInp').change(function (e) {
        readURL(this)
      })

      // 点击图片进行重新选择
      $('#blah').on('click', function (e) {
        e.stopPropagation()
        $('#blah').hide('normal', () => {
          handleLocalStorage('set', 'shareImg', '')
          $('.camera_text').show()
          $('#imgInp').show()
        })
      })

      // 检查图片在分享页面是否分享成功，若未成功继续显示之前未分享的图片
      checkLocalStorage()
      function checkLocalStorage() {
        var img64 = handleLocalStorage('get', 'shareImg')
        console.log('img64', img64)
        if (img64) {
          $('#blah').attr('src', img64)
          $('#blah').show()
          $('.camera_text').hide()
          $('#imgInp').hide()
        }
      }

      // 拍照区域的video
      let photo_video = $('#photo_card #video')
      photo_video.hide()

      // 拍照区域的canvas
      let photo_canvas = $('#photo_card #canvas')
      photo_canvas.hide()

      // 相机图片的设置
      let camera_pic = $('#main #photo_card .camera_pic')
      camera_pic.css({
        height: (height * 65) / DESIGN_HEIGHT,
        background: "url('../images/照相机.png')",
        'background-position': 'center',
        'background-repeat': 'no-repeat',
        'background-size': 'auto 100%',
      })

      // 获取和设置项目陈列区域
      let item_list = $('#item_list')
      item_list.css({
        width: main_countercard.width(),
        height: (height * 400) / DESIGN_HEIGHT,
        top:
          main_title.height() +
          main_countercard.height() +
          20 +
          main_photo_card.height() +
          20,
      })
      item_list.css('left', (width - item_list.width()) / 2)

      let item_pic = $('#item_list .item_pic')
      item_pic.css({
        width: (width * 120) / DESIGN_WIDTH,
        height: (height * 120) / DESIGN_HEIGHT,
        'background-size': ((width * 100) / DESIGN_WIDTH) * 1.2,
        'background-position': 'center',
        'background-repeat': 'no-repeat',
      })

      window.addEventListener('resize', function (e) {
        location.reload()
      })
    })
  </script>
</html>
